<template>
  <Header></Header>
  <el-breadcrumb separator="/" style="font-size: 20px">
    <el-breadcrumb-item >首页</el-breadcrumb-item>
    <el-breadcrumb-item>选择栏目</el-breadcrumb-item>
  </el-breadcrumb>
  <el-container>
  <span class="selectTarget">
    请选择目标群体
  </span>
  
  </el-container>
  <el-container>
    <div class="typeContent">
      <el-row :gutter="20">
        <el-col :span="4" v-if="isType[0].type === 3">
          <div class="typBoxs">
            <div class="home_btn">
              <img src="../assets/img/home_ertong.png" alt="" style="width: 100%;height: 517px">
              <div class="ertongicon">
                <span><img src="../assets/img/home_mengbanbai.png" alt="" style="width: 100%;height: auto"></span>
                <span class="home_avatars"><img src="../assets/img/home_ertongiconlv.png" alt=""> <div class="home_avatars_zi">{{ isType[0].title }}</div></span>
                <el-button @click="onSubmit(isType[0].type)" class="home_avatars_btn">点击选择</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="4" v-if="isType[1].type === 5">
          <div class="typBoxs">
            <div class="home_btn">
              <img src="../assets/img/home_yunfu.png" alt="" style="width: 100%;height: 517px">
              <div class="ertongicon">
                <span><img src="../assets/img/home_mengbanbai.png" alt="" style="width: 100%;height: auto"></span>
                <span class="home_avatars_yufu"><img src="../assets/img/home_yunfuiconlv.png" alt=""> <div class="home_avatars_zi">{{ isType[1].title }}</div></span>
                <el-button @click="onSubmit(isType[1].type)" class="home_avatars_btn">点击选择</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="4"  v-if="isType[2].type ===6">
          <div class="typBoxs">
            <div class="home_btn">
              <img src="../assets/img/home_chengren.png" alt="" style="width: 100%;height: 517px">
              <div class="ertongicon">
                <span><img src="../assets/img/home_mengbanbai.png" alt="" style="width: 100%;height: auto"></span>
                <span class="home_avatars_chengren"><img src="../assets/img/home_chengreniconlv.png" alt=""> <div class="home_avatars_zi">{{ isType[2].title }}</div></span>
                <el-button @click="onSubmit(isType[2].type)" class="home_avatars_btn">点击选择</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="4"  v-if="isType[3].type === 7">
          <div class="typBoxs">
            <div class="home_btn">
              <img src="../assets/img/home_manxingbing.png" alt="" style="width: 100%;height: 517px">
              <div class="ertongicon">
                <span><img src="../assets/img/home_mengbanbai.png" alt="" style="width: 100%;height: auto"></span>
                <span class="home_avatars_manxingbing"><img src="../assets/img/home_manxingbingiconlv.png" alt=""> <div class="home_avatars_zi">{{ isType[3].title }}</div></span>
                <el-button @click="onSubmit(isType[3].type)" class="home_avatars_btn">点击选择</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="4"  v-if="isType[4].type === 8">
          <div class="typBoxs">
            <div class="home_btn">
              <img src="../assets/img/home_qunti.png" alt="" style="width: 100%;height: 517px">
              <div class="ertongicon">
                <span><img src="../assets/img/home_mengbanbai.png" alt="" style="width: 100%;height: auto"></span>
                <span class="home_avatars_manxingbing"><img src="../assets/img/home_manxingbingiconlv.png" alt=""> <div class="home_avatars_zi">{{ isType[4].title }}</div></span>
                <el-button @click="onSubmit(isType[4].type)" class="home_avatars_btn">点击选择</el-button>
              </div>
            </div>
          </div>
        </el-col>



      </el-row>
    </div>
  </el-container>
</template>
<script>
import Header from './common/Header.vue';
import * as api from "../api/loginHttp";
import {getAuth} from "../api/loginHttp";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router"

export default {
  name: "Home",
  components: {
    Header
  },
  data() {
    return {
      isType:[
        {'type':0,'title':'婴幼儿营养测评'},
        {'type':0,'title':'孕产妇营养测评'},
        {'type':0,'title':'成年人营养测评'},
        {'type':0,'title':'慢性病营养测评'},
        {'type':0,'title':'团体营养测评'},
      ],
    }
  },
  created() {
    this.default();
  },
  methods: {
    async default() {
      const data = await api.getAuth();
      if (data.data.code == 1) {
          let info = data.data.data.split(',');
        for(let i = 0; i < info.length; i++) {
          if(info[i] == 3) {
            this.isType[0].type = 3
          } else if(info[i] == 5){
            this.isType[1].type = 5
          } else if(info[i] == 6){
            this.isType[2].type = 6
          } else if(info[i] == 7){
            this.isType[3].type = 7
          }else if(info[i] == 8){
            this.isType[4].type = 8
          }
        }
      } else {
        this.$router.push('/login')
      }
    },
    onSubmit(ids) {
      console.log(ids, '+++=')
      if(ids === 3) {
        this.$router.push({'path':'/pageList/'+ids})
      } else if(ids === 5){
        this.$router.push({'path':'/gravidaList/'+ids})
      } else if(ids === 6){
        this.$router.push({'path':'/AdultList/'+ids})
      } else if(ids ===  7){
        this.$router.push({'path':'/ChronicList/'+ids})
      } else if(ids ===  8){
        this.$router.push({'path':'/CompanyList/'+ids})
      }
    }
  }
}
</script>

<style scoped>

@media screen and (max-width:1920px) {
  .home_avatars_zi{
    padding-top: 9%;
    font-size: 24px;
  }
  /deep/.home_avatars_btn {
  float: left;
  margin-left: 35%;
  margin-top: -18%;
  line-height: 10px;
  background-color: #2AB28B;

}
}




/deep/.home_avatars_btn {
  float: left;
  margin-left: 35%;
  margin-top: -20%;
  line-height: 10px;
  background-color: #2AB28B;

}
/deep/.home_avatars_btn span {
  margin-top: 0px;
  font-size: 20px;
  color: #fff;
}

/deep/.el-col-4 {
  max-width: 20.666667%;
  flex: 1 0 16.6666666667%;
}

/deep/.typBoxs:hover .home_avatars_btn {

  background-color: #FFF;
}

/deep/.typBoxs:hover .home_avatars_btn span {
  margin-top: 0px;
  font-size: 20px;
  color: #2AB28B;
}
</style>
<style>
@import '../assets/css/common.css';
.typeContent {
  margin-left: 1%;
  width: 98%;
  height: 100%;
  text-align: center;
}
.typBoxs {
  width: 100%;
  float: left;
  text-align: center;
  border-radius: 20px;
  border: 1px solid #5EAB4F;
}
.typBoxs:hover .ertongicon img{
  content:url('../assets/img/home_mengban.png');
  float: left;
}
.typBoxs:hover{
  border: 1px solid #5EAB4F;

}
.typBoxs:hover .home_avatars_zi {
  color:#FFFFFF;
}

.typBoxs:hover .home_avatars img{
  content:url('../assets/img/home_ertongicon.png');
}
.typBoxs:hover .home_avatars_yufu img{
  content:url('../assets/img/home_yunfuicon.png');
}

.typBoxs:hover .home_avatars_chengren img{
  content:url('../assets/img/home_chengrenicon.png');
}

.typBoxs:hover .home_avatars_manxingbing img{
  content:url('../assets/img/home_manxingbingicon.png');
}




.typBoxs img{
  float: left;
}

.news p {
  float: right;
}

.home_btn {
  width: 100%;
  height: 517px;

}
.home_btn img {
  float: left;
}
.home_btn span {
  float: left;
  margin-top: -40%;
  width: 100%;

}
.ertongicon {
  float: left;
}
.home_avatars img{
  width: 32px;
  height: 29px;
  padding-left: 25%;
  padding-top: 25px;
}

 .home_avatars_yufu img{
   width: 20px;
   height: 34px;
   padding-left: 25%;
   padding-top: 19px;
 }

.home_avatars_chengren img{
  width: 28px;
  height: 28px;
  padding-left: 25%;
  padding-top: 25px;
}

.home_avatars_manxingbing img{
  width: 28px;
  height: 28px;
  padding-left: 25%;
  padding-top: 25px;
}
.home_avatars_zi {
text-align: center;
  padding-top: 4%;
  font-size: 30px;
  width: 100%;
  text-align: left;
  color: #2AB28B;
  -webkit-transform:scale(0.8);
}



</style>
